﻿@page "/components/buttons"

<Pager Title="Button" Indicates="@(new[]{"Example","Link Button","Outline","Size","Disabled","Active","Block Button","OnClick"})">
	<Demo Title="Example">
		<Run>
	<Button Color="Color.Primary">Primary</Button>
	<Button Color="Color.Secondary">Secondary</Button>
	<Button Color="Color.Success">Success</Button>
	<Button Color="Color.Danger">Danger</Button>
	<Button Color="Color.Warning">Warning</Button>
	<Button Color="Color.Info">Info</Button>	
	<Button Color="Color.Light">Light</Button>
	<Button Color="Color.Dark">Dark</Button>
	<Button Linked>Link</Button>
		</Run>
		<Code>
			@MD.Write(@"```html
<Button Color=""Color.Primary"">Primary</Button>
<Button Color=""Color.Secondary"">Secondary</Button>
<Button Color=""Color.Success"">Success</Button>
<Button Color=""Color.Danger"">Danger</Button>
<Button Color=""Color.Warning"">Warning</Button>
<Button Color=""Color.Info"">Info</Button>	
<Button Color=""Color.Light"">Light</Button>
<Button Color=""Color.Dark"">Dark</Button>
<Button Linked>Link</Button>
```
	")
		</Code>
	</Demo>
	<Demo Title="Button Tags">
		<Description>
			Set <code>ElementType</code> to render different of tags with button class.
		</Description>
		<Run>
	<Button Color="Color.Primary" ElementType="ButtonElement.Anchor" href="#">Primary</Button>
	<Button Color="Color.Primary" ElementType="ButtonElement.Input" type="submit" value="Input"/>
	<Button Color="Color.Primary" type="submit">Button</Button>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Button Color=""Color.Primary"" ElementType=""ButtonElement.Anchor"" href=""#"">Primary</Button>
<Button Color=""Color.Primary"" ElementType=""ButtonElement.Input"" type=""submit"" value=""Input""/>
<Button Color=""Color.Primary"" type=""submit"">Button</Button>
```
	")
		</Code>
	</Demo>
	<Demo Title="Outline">
		<Run>
	<Button Outline Color="Color.Primary">Primary</Button>
	<Button Outline Color="Color.Secondary">Secondary</Button>
	<Button Outline Color="Color.Success">Success</Button>
	<Button Outline Color="Color.Danger">Danger</Button>
	<Button Outline Color="Color.Warning">Warning</Button>
	<Button Outline Color="Color.Info">Info</Button>	
	<Button Outline Color="Color.Light">Light</Button>
	<Button Outline Color="Color.Dark">Dark</Button>
		</Run>
		<Code>
			@MD.Write(@"```html
<Button Outline Color=""Color.Primary"">Primary</Button>
<Button Outline Color=""Color.Secondary"">Secondary</Button>
<Button Outline Color=""Color.Success"">Success</Button>
<Button Outline Color=""Color.Danger"">Danger</Button>
<Button Outline Color=""Color.Warning"">Warning</Button>
<Button Outline Color=""Color.Info"">Info</Button>	
<Button Outline Color=""Color.Light"">Light</Button>
<Button Outline Color=""Color.Dark"">Dark</Button>
```
	")
		</Code>
	</Demo>
	<Demo Title="Size">
		<Run>
			<Button Size="Size.Small" Color="Color.Primary">Small</Button>
			<Button Color="Color.Primary">Default</Button>
			<Button Size="Size.Large" Color="Color.Primary">Large</Button>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Button Size=""Size.Small"" Color=""Color.Primary"">Small</Button>
<Button Color=""Color.Primary"">Default</Button>
<Button Size=""Size.Large"" Color=""Color.Primary"">Large</Button>
```
")
		</Code>
	</Demo>
	<Demo Title="Disabled">
		<Run>
			<Button Disabled Color="Color.Primary">Primary</Button>
			<Button Disabled Color="Color.Secondary">Secondary</Button>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Button Disabled Color=""Color.Primary"">Primary</Button>
<Button Disabled Color=""Color.Secondary"">Secondary</Button>
```
")
		</Code>
	</Demo>
		<Demo Title="Active">
		<Run>
			<Button Color="Color.Primary">Primary</Button>
			<Button Actived Color="Color.Primary">Primary Actived</Button>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Button Color=""Color.Primary"">Primary</Button>
<Button Actived Color=""Color.Primary"">Primary Actived</Button>
```
")
		</Code>
	</Demo>
		<Demo Title="Block Button">
		<Description>
			Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
		</Description>
		<Run>
			<Element CssClass="Css.Display(DisplayType.Grid).Gap(Num.Two2)">
				<Button Color="Color.Primary">Button</Button>
				<Button Color="Color.Info">Info</Button>
			</Element>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Element CssClass=""Css.Display(DisplayType.Grid).Gap(Num.Two2)"">
	<Button Color=""Color.Primary"">Button</Button>
	<Button Color=""Color.Info"">Info</Button>
</Element>
```
			")
		</Code>
	</Demo>
		<Demo Title="OnClick">
		<Description>
			
		</Description>
		<Run>
			<Button Color="Color.Primary" OnClick="@(e=>JS.InvokeVoidAsync("alert",new[]{"button clicked"}))">Click</Button>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Button Color=""Color.Primary"" OnClick=""@(e=>JS.InvokeVoidAsync(""alert"",new[]{""button clicked""}))"">Click</Button>
```
			")
		</Code>
	</Demo>
</Pager>
@inject IJSRuntime JS